@import "../../../styles/variable";

.cell-item {
  background-color: @colorE5E5E5;
  width: 100%;
  height: 210px;
  &.cell-item_invalid {
    .cell-content {
      .cell-right {
        .cell-title {
          color: @color999;
        }
        .cell-price {
          color: @color999;
        }
      }
    }
  }
  .cell-content {
    width: 100%;
    height: 100%;
    background-color: @colorWhite;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .img-content {
      width: 150px;
      height: 150px;
      margin-left: 30px;
      position: relative;
      box-sizing: border-box;
      &:before {
        .borderAll();
      }
      .img-icon {
        width: 100%;
        height: 100%;
      }
    }

    .cell-right {
      margin-left: 20px;
      margin-right: 30px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .cell-title {
        font-size: @font28;
        color: @color333;
        line-height: 42px;
        height: 84px;
        .line(2);
      }
      .cell-price {
        font-size: @font24;
        color: @colorD0021B;
        line-height: 42px;
      }
      .cell-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 36px;
        font-size: @font24;
        color: @color999;
        .cell-bitem {
          &:first-child {}
          margin-right: 20px;
        }
      }
    }

    .cart-content {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 88px;
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      .cart-icon {
        width: 48px;
        height: 48px;
      }
    }
    .cell-tag {
      position: absolute;
      right: 30px;
      bottom: 30px;
      width: 72px;
      height: 40px;
      background-color: @color999;
      color: @colorWhite;
      font-size: @font26;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .cell-btn_outer {
    width: 100%;
    height: 100%;
    .btn-content {
      width: 100%;
      height: 100%;
      background-color: @colorFF3B3B;
      color: @colorWhite;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: @font30;
    }
  }
}
